<template>
<div>
    <el-breadcrumb separator="/">
         <el-breadcrumb-item >我的项目管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div >
        <el-row>
        <el-col class="boss-x">
            <div class="zuobian">
                <span>班级选择</span>
            <div class="block">
            <el-cascader
                v-model="form"
                :options="options3"
                @change="handleChange"></el-cascader>
            </div>
            </div>
             <div class="youbian">
                <span>项目类别</span>
            <div class="block">
            <el-cascader
                v-model="form"
                :options="options"
                @change="handleChange"></el-cascader>
            </div>
            </div>
            
        </el-col>
    </el-row>
    </div>
    
    <el-row>
        <el-col>
        <el-table
        :data="userlist.slice((page-1)*pageSize,pageSize*page)"
        style="width:100%"
        class="tableinfo margintop20"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        stripe
        >

        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="项目名称" prop="title"></el-table-column>
        <el-table-column label="项目地址" prop="lianjie"></el-table-column>
        <el-table-column label="项目类别" prop="category"></el-table-column>
        <el-table-column label="项目描述" prop="miaoshu"></el-table-column>
        <el-table-column label="项目技术" prop="jishu"></el-table-column>
        <el-table-column label="难点亮点" prop="nandian"></el-table-column>
        <el-table-column label="得分" sortable></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
                        <el-button effect="dark"  type="success"  size="mini" @click="showdialog(scope.row._id)"  > 打分 </el-button>
                    </template>
            
            
       
        </el-table-column>
        </el-table>
       
         <el-dialog
            title="项目评分"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
            
            >
            <el-input v-model="xmscore" type="text" placeholder="请输入项目分数"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeScore" >确 定</el-button>
            </span>
            </el-dialog>
        <span>共 {{total}} 条数据</span>
        
    
    </el-col>
    
    </el-row>

</div>
    

</template>

<script>
import {xiangmucatetory,banjicatetory} from "@/utils"
import {getxiangmulist,delxiangmuAjax,updatexiangmu,setxmscore} from "@/api"
import Vue from "vue"
export default {
    name:"userlist",
    data(){
        return{
            userlist:[],
            pageSize:6,
            page:1,
            form:{},
            dialogVisible:false,
            options:xiangmucatetory,
            options3:banjicatetory,
            rules:{
                
            },
            xmscore:'',
            _id:''
        }
    },
    computed:{
        total(){
            return this.userlist.length
        }
    },
    mounted(){
        getxiangmulist()
        .then(res=>{
            if(res.type){
                this.$nextTick(()=>{
                    this.userlist = res.result
                })
            }
        })
    },
    methods:{
        updateById(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    console.log(this.form)
                    updatexiangmu(this.form)
                    .then(res=>{
                        this.dialogVisible =false
                        this.userlist.forEach((item,i) => {
                            if(item._id==this.form._id) {
                                Vue.set(this.userlist,i,this.form)
                            }
                        });
                        
                    }).catch(err=>{

                    })
                }else{
                    return false
                }
            })
        },
        Insertone(row){
            this.dialogVisible=true
            // this.form = row
            this.form = {...this.form,...row}

        },
        handleClose(){
            this.dialogVisible=false
        },
        changecurrent(current){
            this.page = current
        },
        handleChange(){

        },
        delxiangmu(row){
            console.log(row)
            var roleid = sessionStorage.getItem("roleid")
            delxiangmuAjax({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.userlist=this.userlist.filter(item=>item._id!==row._id)
                }
            }).catch(err=>{

            })
        },

        changeScore(){
            console.log(this._id);
            this.$axios.post("/vue/setxmscore",{
                _id:this._id,
                score:this.xmscore
            }).then(res=>{
                if(res.data.type){
                    this.dialogVisible = false;
                    this.userlist = this.userlist.map((item)=>{
                        if(item._id==this._id){
                            item.score = this.xmscore
                            this.$nextTick(()=>{
                                this.userlist = res.result
                            })
                        }
                        return item;
                    })
                    this.xmscore = ''
                }
            })
        },
        showdialog(_id){
            this.dialogVisible = true;
            this._id=_id;
        },
        
    }
}
</script>


<style lang="scss" scoped>
   .boss-x{
       display: flex;
       align-items: center;
       margin-top: 20px;
       .zuobian{
             display: flex;
             align-items: center;
             margin-right: 50px;
             span{
                 margin-right: 20px;
             }
       }
        .youbian{
             display: flex;
             align-items: center;
             span{
                 margin-right: 20px;
             }
       }
   }
</style>